<template>
  <div>
    <!-- 商品基本信息 -->
    <a-card>
      <space-between>
        <h2>{{ d.name }}</h2>
        <div v-only-admin>
          <a-button @click="updateGood" type="primary" size="small">
            编辑
          </a-button>
          &nbsp;
          <a-button @click="delGood" type="danger" size="small">删除</a-button>
        </div>
      </space-between>
      <a-divider />
      <div class="basic-info">
        <div class="items">
          <div class="item">
            <div class="title">价格</div>
            <div class="content">{{ d.price }}</div>
          </div>
          <div class="item">
            <div class="title">商家</div>
            <div class="content">{{ d.merchant }}</div>
          </div>
          <div class="item">
            <div class="title">分类</div>
            <div class="content">{{ d.classify }}</div>
          </div>
        </div>
        <div class="items">
          <div class="item">
            <div class="title">发布时间</div>
            <div class="content">{{ formateTimestamp(d.publishDate) }}</div>
          </div>
        </div>
      </div>
    </a-card>
    <!-- 出入库日志 -->
    <div class="mt-10">
      <a-card title="出入库日志">
        <template #extra>
          <a @click="logFilter('OUT')">
            <CheckOutlined v-show="curLogType === 'OUT'" />
            出库日志
          </a>
          <a @click="logFilter('IN')" style="margin-left:12px">
            <CheckOutlined v-show="curLogType === 'IN'" />
            入库日志
          </a>
        </template>
        <!-- 出库日志表格 -->
        <a-table
          bordered
          :dataSource="loglist"
          :columns="columns"
          :pagination="false"
        >
          <template #createdAt="data">
            {{ formateTimestamp(data.record.meta.createdAt) }}
          </template>
        </a-table>
        <div class="mt-10">
          <a-pagination
            v-model:current="curPage"
            :page-size="pageSize"
            :total="total"
            @change="setPage"
          />
        </div>
      </a-card>
    </div>
    <update-one
      v-model:visible="updateOneVisible"
      :good="d"
      @update="updateGoodView"
    />
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { CheckOutlined } from '@ant-design/icons-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { handleResult, formateTimestamp } from '../helpers/utils'
import { goodService, inventoryService } from '../services'
import UpdateOne from './Goods/UpdateOne.vue'
export default defineComponent({
  components: {
    UpdateOne,
    CheckOutlined
  },
  setup () {
    const route = useRoute()
    const router = useRouter()

    /** 当前详情页商品id */
    const goodId = route.params.id

    /** 商品详细信息 */
    const detailInfo = ref({})

    /** 获取商品详细信息 */
    const getDetailInfo = async () => {
      const res = await goodService.getDetail(goodId)
      handleResult(res).success(({ data }) => {
        detailInfo.value = data
      })
    }

    /** 日志 */
    const loglist = ref([])
    const curPage = ref(1)
    const pageSize = ref(5)
    const total = ref(0)
    const columns = [
      {
        title: '数量',
        dataIndex: 'num'
      },
      {
        title: '时间',
        slots: {
          customRender: 'createdAt'
        }
      }
    ]
    const curLogType = ref('IN')

    /** 页码变化事件 */
    const setPage = page => {
      curPage.value = page
      getInventoryLog()
    }

    /** 获取出入库日志 */
    const getInventoryLog = async () => {
      const res = await inventoryService.getLogList(
        curLogType.value,
        curPage.value,
        pageSize.value
      )
      handleResult(res).success(({ data: { list, total: t } }) => {
        list.forEach(item => (item.key = item._id))
        loglist.value = list
        total.value = t
      })
    }

    const logFilter = type => {
      curLogType.value = type
      getInventoryLog()
    }

    onMounted(async () => {
      getDetailInfo()
      getInventoryLog()
    })

    /** 删除当前商品 */
    const delGood = async () => {
      const res = await goodService.delGood(goodId)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
        router.replace('/goods')
      })
    }

    /** 编辑当前商品 */
    const updateGood = async () => {
      updateOneVisible.value = true
    }

    /** 更新视图 */
    const updateGoodView = good => {
      Object.assign(detailInfo.value, good)
    }

    const updateOneVisible = ref(false)

    return {
      d: detailInfo,
      formateTimestamp,
      delGood,
      updateGood,
      updateGoodView,
      updateOneVisible,
      curPage,
      pageSize,
      total,
      setPage,
      columns,
      loglist,
      logFilter,
      curLogType
    }
  }
})
</script>

<style lang="scss" scoped>
.basic-info {
  .items {
    display: flex;
    .item {
      flex: 1;
      display: flex;
      .title {
        font-weight: 700;
        min-width: 70px;
      }
    }
  }
}
</style>
